import React,{Component} from 'react';

import axios from 'axios';

import StyleSheets from './user.css';

// import StyleSheets from './styles';

export default class extends Component {

    constructor(props){
      super(props);
      this.state = {
        users:[]
      }
    }

    render(){
      return(
        <div className={StyleSheets.container}>
            <h1>用户列表</h1>
            {this.state.users}
        </div>
      )
    }

    componentDidMount() {
      // console.log('--------componentDidMount')
      axios.get('https://api.github.com/events')
      .then( (res) => {

          var users = res.data;
          users = users.map( (user) => {
                return  <User key={user.id} info={user}/>
          })
          console.log(res)
          this.setState({
            users :users
          })
      })
    }

}


class User extends Component {

  render () {
    return (<div key={this.props.info.id}  className={StyleSheets.item}>
          <div className={StyleSheets.avatar}><img style={ {width:100}} src={this.props.info.actor.avatar_url} /></div>
          <div className={StyleSheets.nickname}>{this.props.info.actor.login}</div>
    </div>)
  }
}
